<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in info" :key="item.id">
        <van-image :src="url + item.imgSrc"
      /></van-swipe-item>
    </van-swipe>
    <van-search
      class="searchs"
      background="rgba(0,0,0,0)"
      show-action
      placeholder="请输入小区或地址"
    >
      <template #label>
        <div class="label-text" @click="$router.push('/city')">
          <p>{{ cityName }}</p>
          <van-icon
            class="iconfont"
            class-prefix="icon"
            name="xialakuangxiala"
            size="28px"
            color="#7f7f80"
          />
        </div>
      </template>
      <template #action>
        <van-icon
          class="iconfont"
          class-prefix="icon"
          name="dituzhaofang"
          size="25px"
          color="#fff"
        />
      </template>
    </van-search>
    <div class="nav-box">
      <ul>
        <li>
          <div class="nav-icos">
            <van-icon
              size="40"
              color="#21b97a"
              name="wap-home-o"
              @click="$router.push('/list')"
            />
          </div>
          <p>整租</p>
        </li>
        <li>
          <div class="nav-icos">
            <van-icon
              size="40"
              color="#21b97a"
              name="friends-o"
              @click="$router.push('/list')"
            />
          </div>
          <p>合租</p>
        </li>
        <li>
          <div class="nav-icos">
            <van-icon
              class="iconfont"
              class-prefix="icon"
              size="35"
              color="#21b97a"
              name="dituguanli"
                @click="$router.push('/map')"
            />
          </div>
          <p>地图找房</p>
        </li>
        <li>
          <div class="nav-icos">
            <van-icon
              class="iconfont"
              class-prefix="icon"
              size="35"
              color="#21b97a"
              name="zufang"
              @click="$router.push('/rent')"
            />
          </div>
          <p>去出租</p>
        </li>
      </ul>
    </div>
    <div class="nav-content">
      <div class="nav-more">
        <p>租房小组</p>
        <span>更多</span>
      </div>
      <van-grid
        :border="false"
        :column-num="2"
        direction="horizontal"
        :gutter="10"
      >
        <van-grid-item class="nav-grid" v-for="item in msg" :key='item.imgSrc'>
          <img :src="url + item.imgSrc" alt="" />
          <div class="grid-text">
            <p>{{item.title}}</p>
            <p>{{item.desc}}</p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { swiper, homeInfo } from '@/api/home'
import { mapState } from 'vuex'

export default {
  name: 'MainPage',
  data () {
    return {
      info: '',
      msg: '',
      url: 'http://liufusong.top:8080'
    }
  },
  async created () {
    const data = await swiper()
    console.log(data)
    this.info = data.body
    console.log(this.info)
    const msgg = await homeInfo(this.$route.query.area)
    console.log(msgg)
    this.msg = msgg.body
  },
  computed: {
    ...mapState('user', ['cityName'])
  }
}
</script>

<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
}
.searchs {
  width: 100%;
  position: absolute;
  top: 10px;
  .label-text {
    display: flex;
  }
}
.grids {
  height: 120px;
  background-color: aqua;
}
.nav-box {
  width: 100%;
  height: 120px;
  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 120px;
    li {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      font-size: 14px;
      margin-top: 10px;
      .nav-icos {
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-radius: 50%;
        background-color: #f2fbf7;
      }
    }
  }
}
.nav-content {
  height: 187px;
  background-color: #f6f5f6;
  .nav-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    background-color: #f6f5f6;
    margin: 0 15px 0 15px;
    color: #787d82;
    p {
      font-size: 15px;
      color: #333;
      font-weight: 700;
    }
  }
  img {
    width: 50px;
    height: 50px;
    margin-left: -30px;
    margin-right: 10px;
  }
  .nav-grid {
    height: 60px;
    .grid-text {
      font-size: 14px;
    }
  }
}
</style>
